{% extends "admin/change_form.html" %}

{% block admin_change_form_document_ready %}
	{{ block.super }}
	<style>
		.column-page, .field-page {
			display: none;
		}
	</style>

	<script>
		(() => {
			'use strict'

			window.addEventListener('load', () => {
				//########## add an event listener ##########
				let td_list = document.querySelectorAll('.field-item_type')
				let select_list = document.querySelectorAll('.field-item_type select')


				if (select_list)
				{
					for (let select of select_list)
					{
						handle_toggle_inputs({ target: select })
						select.addEventListener('change', handle_toggle_inputs)
					}
				}

				//########## add even listener to new rows ##########
				let add_row = document.querySelector('.add-row a')

				if (add_row)
				{
					add_row.addEventListener('click', () => {
						let select_list = document.querySelectorAll('.field-item_type select')
						select_list[select_list.length - 2].addEventListener('change', handle_toggle_inputs)
					})
				}
			})

			function is_stacked()
			{
				let inline_type = document.querySelector('div[data-inline-type]')
				if (inline_type)
					return inline_type.getAttribute('data-inline-type') == 'stacked'
				return false
			}

			// Toggle field beteen url input & page select
			function handle_toggle_inputs(e) {
				let tr = e.target.parentElement.parentElement
				if (is_stacked())
					tr = tr.parentElement

				let url_field = tr.querySelector('.field-url')
				let page_field = tr.querySelector('.field-page')

				if (e.target.value == 1)
				{
					// hide url field.
					url_field.style.display = 'none'
					page_field.style.display = 'revert'
				}
				else
				{
					url_field.style.display = 'revert'
					page_field.style.display = 'none'
				}
			}

		})()
	</script>
{% endblock %}
